<!DOCTYPE html>
<html>
<head>
  <style>
      canvas { display: block; margin: auto; background-color: #f0f0f0; }
  </style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
  var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置初始和目标点
var startPoint = { x: 50, y: 50 };
var endPoint = { x: canvas.width - 50, y: canvas.height - 50 };

// 飞线速度（每帧移动的距离）
var speed = 3;

// 绘制飞线
function drawLine() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

  // 计算当前位置，逐渐逼近终点
  var currentPoint = {
    x: startPoint.x + (endPoint.x - startPoint.x) * (speed / Math.sqrt(Math.pow(endPoint.x - startPoint.x, 2) + Math.pow(endPoint.y - startPoint.y, 2))),
    y: startPoint.y + (endPoint.y - startPoint.y) * (speed / Math.sqrt(Math.pow(endPoint.x - startPoint.x, 2) + Math.pow(endPoint.y - startPoint.y, 2)))
  };

  // 当接近终点时，重置起点和终点以形成循环动画
  if (Math.abs(currentPoint.x - endPoint.x) < speed && Math.abs(currentPoint.y - endPoint.y) < speed) {
    startPoint = endPoint;
    endPoint = { x: Math.random() * canvas.width, y: Math.random() * canvas.height };
  }

  ctx.beginPath();
  ctx.moveTo(startPoint.x, startPoint.y);
  ctx.lineTo(currentPoint.x, currentPoint.y);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.stroke();
}

// 动画循环
setInterval(drawLine, 1000 / 60); // 以每秒60帧的速度更新
</script>
</body>
</html>